<template>
    <div class="mainCenter">
        <div class="title">用户修改</div>
        <div class="mainCenterBox">
            <el-form label-width="120" :model="baseInfo" :rules="rules" ref="formRef">
                <div class="left">
                    <el-form-item label="用户编号">
                        <el-input type="text" v-model="baseInfo!.uid" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="用户姓名" prop="relname">
                        <el-input type="text" v-model="baseInfo!.relname"></el-input>
                    </el-form-item>
                    <el-form-item label="用户生日">
                        <el-date-picker v-model="baseInfo.birth" type="date" placeholder="选择生日" />
                    </el-form-item>
                    <el-form-item label="用户性别">
                        <el-radio-group v-model="baseInfo.gender" class="ml-4">
                            <el-radio label="1" size="large">男</el-radio>
                            <el-radio label="2" size="large">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="用户手机号" prop="phonenumber">
                        <el-input type="text" v-model="baseInfo!.phonenumber"></el-input>
                    </el-form-item>
                    <el-form-item label="用户邮箱" prop="mail">
                        <el-input type="text" v-model="baseInfo!.mail"></el-input>
                    </el-form-item>
                    <el-form-item label="用户身份证号">
                        <el-input type="text" v-model="baseInfo!.pid"></el-input>
                    </el-form-item>
                    <el-form-item label="用户备注">
                        <el-input type="textarea" v-model="baseInfo!.remark" :row="5" show-word-limit maxlength="30"
                            resize="none"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="save" @click="submitForm(formRef)">保存</el-button>
                    </el-form-item>
                </div>
                <div class="right">
                    <el-form-item class="imgBox">
                        <div class="avatar-uploader">
                            <img :src="baseInfo.avatar" alt="">
                        </div>
                        <el-upload :http-request="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                            :show-file-list="false">
                            <el-button type="primary" plain>上传头像</el-button>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqCheckMail,reqCheckPhone } from '@/api/common';
import { useLoginStore } from '@/stores/loginStore';
import { User} from '@/types/user';
import { tip } from '@/utils/alert';

import { FormRules, UploadProps,FormInstance } from 'element-plus'
import { getBase64 } from '@/utils/commonUse';
import  Cloud  from 'leancloud-storage';
import { computed, reactive, ref } from 'vue';
const { mangerInfo,mangerEidt } = useLoginStore()
const baseInfo = ref<User>({ ...mangerInfo as User})


const formRef=ref<FormInstance>()
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    const imgType = ['image/jpeg', 'image/png']
    if (imgType.indexOf(rawFile.type) == -1) {
        tip('图片格式为jpg', 'warning')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        tip('图片大小应为2MB', 'warning')
        return false
    }
    return true
}

const handleAvatarSuccess = (info: { file: any; }) => {
    getBase64(info.file, (base64: any) => {
        baseInfo.value.avatar = base64
    })
}

const checkName = (rules: any, value: any, callback: any) => {
    if (value == '') {
        callback(new Error('请输入真实名字'))
    } else {
        callback()
    }
}
const checkMail = (rules: any, value: any, callback: any) => {
    let reg = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/
    if (value != mangerInfo?.mail) {
        if (value == '') {
            callback(new Error('请输入邮箱'))
        } else if (!reg.test(value)) {
            callback(new Error('邮箱格式错误'))
        } else {
            reqCheckMail(value).then(res=>{
                if(res.data.code!=200){
                    callback(new Error('邮箱已存在'))
                }else{
                    callback()
                }
            })
        }
    }else{
        callback()
    }
}

const checkPhoneNumber=(rules: any, value: any, callback: any)=> {
    let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    if (value != mangerInfo?.phonenumber) {
        if (value == '') {
            callback(new Error('请输入手机号'))
        } else if (!reg.test(value)) {
            callback(new Error('手机号式错误'))
        } else {
            reqCheckPhone(value).then(res=>{
                if(res.data.code!=200){ 
                    console.log(res);
                    callback(new Error('手机号已存在'))
                }else{
                    callback()
                }
            })
        }
    }else{
        callback()
    }
}

const rules = reactive<FormRules>({
  relname: [{ validator: checkName, trigger: 'blur',required:true }],
  mail: [{ validator: checkMail, trigger: 'blur',required:true }],
  phonenumber: [{ validator: checkPhoneNumber, trigger: 'blur',required:true }],
})











const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      mangerEidt(baseInfo.value)
    } else {
      console.log('error submit!')
      return false
    }
  })
}







</script>

<style scoped lang="scss">
.mainCenterBox {
    .el-form {
        width: 400px;
        display: flex;

        .imgBox {
            .avatar-uploader {
                height: 200px;
                width: 200px;
                border: 1px dashed var(--el-border-color);
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .el-button {
                margin-top: 20px;
                width: 200px;
            }
        }

        .el-form-item {
            .save {
                width: 400px;
            }
        }
    }
}
</style>